<template>
  <div class="single-form">
    <VolForm ref="myform" :formFields="formFields" :formRules="formRules">
      <div style="text-align: center; margin-top: 10px">
        <el-button type="primary" size="small" @click="save">保存</el-button>
        <el-button type="primary" size="small" @click="getForm"
          >获取表单</el-button
        >
        <el-button type="success" size="small" @click="reset"
          >重置表单</el-button
        >
      </div>
    </VolForm>
  </div>
</template>
<script>
let $vue;
import VolForm from "@/components/basic/VolForm.vue";
import { readonly } from "@vue/reactivity";
export default {
  components: { VolForm },
  created() {
    $vue = this;
  },
  mounted() {
    this.getdetail();
  },
  methods: {
    getdetail() {
      this.http
        .post(
          "/api/app_product/getProduct?id=1fb991e7-ca64-44b7-80de-91343d217599",
          {},
          "正在调用后台数据"
        )
        .then((data) => {
          console.log("detail", data);
          //this.$message.success("从后台获取的服务器时间是：" + data);
          this.formFields = data;
          if (this.formFields.ColorIds && this.formFields.ColorIds.length > 0)
            this.formFields.ColorIds = this.formFields.ColorIds.split(",");
        });
    },
    save() {
      this.$refs.myform.validate(() => {
        //this.$Message.info("验证通过");
        this.formFields.ColorIds = this.formFields.ColorIds.join(",");
        var picarray = [];
        this.formFields.Pic.forEach(function(item) {
          picarray.push(item.path);
        });
        this.formFields.Pic = picarray.join(",");

        var filetestary = [];
        this.formFields.FileTest.forEach(function(item) {
          filetestary.push(item.path);
        });
        this.formFields.FileTest = filetestary.join(",");

        this.http
          .post("/api/app_product/add", { mainData: this.formFields }, true)
          .then((x) => {
            this.$Message.info("新增成功");
            console.log("保存结果：" + JSON.stringify(x));
          });
      });
    },
    getForm() {
      if (!this.$refs.myform.validate()) {
        return;
      }
      this.$message.error(JSON.stringify(this.formFields));
    },
    reset() {
      //重置表单，重置时可指定重置的值，如果没有指定重置的值，默认全部清空
      let data = { Variety: "1", AvgPrice: 888 };
      this.$refs.myform.reset(data);
      this.$message.error("表单已重置");
    },
  },
  data() {
    return {
      model: false,
      loadKey: true,
      formFields: {
        Name: "",
        Price: "",
        CategoeyId: "",
        ColorIds: "",
        Pic: [
          {
            name: "060222.jpg",
            path:
              "http://api.volcore.xyz/Upload/Tables/App_Expert/202103061753415708/060222.jpg",
          },
        ],
        FileTest: [
          {
            name: "exceltest.xlsx",
            path:
              "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/github/exceltest.xlsx",
          },
        ],
      },
      formRules: [
        [
          {
            title: "名称",
            required: true,
            field: "Name",
            placeholder: "请输入产品名称",
            type: "text",
          },
          {
            type: "decimal",
            title: "产品价格",
            max: 10,
            min: 0,
            required: true,
            field: "Price",
          },
        ],
        [
          {
            dataKey: "产品类型", //后台下拉框对应的数据字典编号
            data: [], //loadKey设置为true,会根据dataKey从后台的下拉框数据源中自动加载数据
            //data是须的参数，可以默认一个[]
            title: "产品类型",
            required: true, //设置为必选项
            field: "CategoeyId",
            placeholder: "选择产品类型",
            type: "select",
            onChange(value, param) {
              //设置选择数据时触发的事件
              /*
              $vue.formFields.AvgPrice =
                (Math.random(1, 1000) * 100).toFixed(2) * 1;
              */
            },
          },
          {
            dataKey: "colorsel",
            title: "颜色",
            required: true,
            field: "ColorIds",
            data: [],
            type: "selectList",
          },
        ],
        [
          {
            title: "是否启用",
            field: "Enable",
            dataKey: "enable", //这里会从后台自动绑定数据源
            data: [],
            required: false,
            type: "switch",
          },
        ],
        [
          {
            title: "图片", //更多上传参数可参照volupload组件
            field: "Pic",
            type: "img",
            maxFile: 2,
            maxSize: 5, //最大0.2M图片
            multiple: true,
            url: "/api/App_Product/Upload",
          },
          {
            title: "文件", //更多上传参数可参照volupload组件
            field: "FileTest",
            type: "file",
            maxFile: 2,
            maxSize: 5, //最大0.2M图片
            multiple: true,
            url: "/api/App_Product/Upload",
          },
        ],
      ],
    };
  },
};
</script>
<style scoped>
.single-form {
  position: relative;
  max-width: 1200px;
  padding: 30px 45px;
  left: 0;
  display: flex;
  margin: auto;
}
</style>
